<script lang="ts" setup>
import type { ObjectDirective } from 'vue';

import { useElementSize } from '@vueuse/core';

import bg from './bg.png';
import { CanvasDrawer } from './canvas-drawer';
import dateBg from './date-bg.png';
import logo from './logo.png';
import qr from './qrcode.png';

let drawer: CanvasDrawer;

const sizeWidth = 1040;

const vCanvas: ObjectDirective<HTMLCanvasElement> = {
  beforeMount(el: HTMLCanvasElement) {
    drawer = new CanvasDrawer({
      canvas: el,
      size: { height: 667, width: sizeWidth },
      designWidth: sizeWidth,
    });

    share();
  },
};

// https://html2canvas.hertzen.com/dist/html2canvas.min.js

const el = useTemplateRef('el');
const { width, height } = useElementSize(el);

// useEventListener(window, 'resize', (evt) => {
//   drawer.resize({ width: width.value * 0.8, height: window.innerHeight * 0.8 });
//   renderCanvas();
// });

// scriptLoad('https://html2canvas.hertzen.com/dist/html2canvas.min.js').then(() => {
//   // renderCanvas();
//   html2canvas(document.querySelector('#capture')).then((canvas) => {
//     document.querySelector('#DemoCanvas').append(canvas);
//   });
// });

function share() {
  drawer.renderCanvas({
    title: '动态高度标题动态高度标题动态高度标题动态高度标题动态高度标题',
    content: window.getSelection()?.toString() || '',
    bg,
    logo,
    dateBg,
    qr,
  });
}
</script>
<template>
  <div ref="el" class="DemoCanvas" id="DemoCanvas">
    <button @mousedown.prevent @click="share" tabindex="-1">分享生成图片</button>
    <!-- <canvas v-Canvas width="375" height="667" style="width: 1040px"></canvas> -->
    <canvas v-Canvas width="375" height="667" style="width: 500px"></canvas>

    <div>
      当地时间8月19日上午11点，美团旗下国际外卖品牌Keeta正式在卡塔尔首都多哈上线。这是继沙特阿拉伯之后，美团国际化业务在中东市场的又一重要突破。
      Keeta表示，基于我们在沙特的良好进展，我们选择卡塔尔作为Keeta在中东的第二站。卡塔尔作为世界上人均GDP最高的经济体之一，其外卖市场具有巨大的增长潜力。Keeta致力于为卡塔尔用户提供更好的外卖服务体验，助力当地餐饮商户、骑手等合作伙伴健康发展。
    </div>
  </div>
</template>

<style lang="scss" scoped>
.DemoCanvas {
  .cont {
    // display: -webkit-box;
    width: 100px;
    padding: 20px;
    background-color: var(--el-bg-color-page);

    .text {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 5;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
